import React, { Component } from "react";
import "../assets/css/Login&Register.css";
import LOGO from "../assets/img/orange.png";
import Top from "../component/Top";
import { login } from '../utils/api';

export default class Login extends Component {
    constructor() {
        super();
        this.state = {
            title: "登录",
            userinfo: {
                phone: "",
                password: "",
            },
        };
    }
    async Login() {
        let res = await login(this.state.userinfo)
        alert(res.msg);
        if (res.code == 200) {
            localStorage.setItem('user',JSON.stringify(res.list))
            this.props.history.push('/')
        }
    }
    change(e, data) {
        this.setState({
            ...this.state,
            userinfo: {
                ...this.state.userinfo,
                [data]: e.target.value,
            },
        });
    }
    render() {
        let { userinfo, title } = this.state;
        return (
            <div>
                <Top title={title}></Top>
                <article className="login flexC">
                    <h1 className="logo">
                        <img src={LOGO} alt="LOGO" />
                    </h1>
                    <div className="tel">
                        <input
                            type="tel"
                            value={userinfo.phone}
                            placeholder="手机号"
                            className="font24"
                            onChange={(e) => this.change(e, "phone")}
                        />
                    </div>
                    <div className="yzm flex">
                        <input
                            type="text"
                            value={userinfo.password}
                            placeholder="密码"
                            className="font24"
                            onChange={(e) => this.change(e, "password")}
                        />
                        {/* <input type="button" placeholder="获取验证码" className="font20" /> */}
                    </div>
                    <input
                        type="submit"
                        value="登		录"
                        className="font32"
                        onClick={()=>this.Login()}
                    ></input>
                </article>
            </div>
        );
    }
}
